<template>
  <div class="page-bg">
    <front-header />
    <div class="main-content">
      <el-card class="chat-card">
        <div class="chat-title">与专家聊天</div>
        <div class="chat-messages">
          <div v-for="msg in messages" :key="msg.id" :class="['chat-msg', msg.fromExpert ? 'right' : 'left']">
            <div class="bubble">
              <span class="role">{{ msg.fromExpert ? '[专家]' : '[我]' }}</span>
              <span>{{ msg.content }}</span>
              <span class="time">{{ msg.sendTime }}</span>
            </div>
          </div>
        </div>
        <div class="chat-input-row">
          <el-input v-model="input" placeholder="请输入内容..." @keyup.enter.native="send" class="chat-input" />
          <el-button type="primary" @click="send">发送</el-button>
        </div>
      </el-card>
    </div>
    <front-footer />
  </div>
</template>
<script>
import { connectChatSocket, sendChatMessage, closeChatSocket } from '../../api/chatSocket';
import FrontHeader from "@/components/front/FrontHeader.vue";
import FrontFooter from "@/components/front/FrontFooter.vue";
export default {
  components: {FrontFooter, FrontHeader},
  data() {
    return {
      messages: [],
      input: '',
      userId: 1, // TODO: 替换为实际登录用户ID
      expertId: Number(this.$route.params.expertId),
      socket: null
    };
  },
  methods: {
    connect() {
      connectChatSocket({
        expertId: this.expertId,
        userId: this.userId,
        role: 'user',
        onMessage: (msg) => {
          this.messages.push(msg);
        }
      });
    },
    send() {
      if (!this.input) return;
      const msg = {
        expertId: this.expertId,
        userId: this.userId,
        content: this.input,
        fromExpert: false,
        sendTime: new Date().toISOString()
      };
      sendChatMessage(msg);
      this.messages.push(msg);
      this.input = '';
    }
  },
  mounted() {
    this.connect();
  },
  beforeDestroy() {
    closeChatSocket();
  }
};
</script>
<style scoped>
.page-bg {
  min-height: 100vh;
  background: #f7f8fa;
  display: flex;
  flex-direction: column;
}
.main-content {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 32px 0 32px 0;
}
.chat-card {
  width: 420px;
  min-height: 480px;
  padding: 24px 24px 16px 24px;
  border-radius: 12px;
  box-shadow: 0 4px 24px #e6e8f0;
  display: flex;
  flex-direction: column;
  background: #fff;
}
.chat-title {
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 18px;
  text-align: center;
}
.chat-messages {
  flex: 1;
  overflow-y: auto;
  margin-bottom: 16px;
  padding: 0 4px;
  min-height: 220px;
}
.chat-msg {
  display: flex;
  margin-bottom: 10px;
}
.chat-msg.left {
  justify-content: flex-start;
}
.chat-msg.right {
  justify-content: flex-end;
}
.bubble {
  max-width: 70%;
  background: #f0f4fa;
  border-radius: 16px;
  padding: 8px 14px;
  font-size: 15px;
  position: relative;
  word-break: break-all;
}
.chat-msg.right .bubble {
  background: #cce6ff;
}
.role {
  font-weight: bold;
  margin-right: 6px;
  color: #409EFF;
}
.time {
  font-size: 12px;
  color: #888;
  margin-left: 8px;
}
.chat-input-row {
  display: flex;
  gap: 10px;
  align-items: center;
}
.chat-input {
  flex: 1;
}
@media (max-width: 600px) {
  .chat-card {
    width: 95vw;
    padding: 12px 4px 8px 4px;
  }
  .main-content {
    margin: 12px 0 12px 0;
  }
}
</style> 